<!-- 物流线路 - 表单编辑页面 -->
<template>
  <div class="page_rela_container" >
		<div class="scroll_auto flex_cell">

    <!-- title -->
    <!-- <div class="page-content-title">
      {{ $tt('label_current_position') }}：{{ operateTitle }}
    </div> -->
    <page_breadcrumb />
    <el-form ref="formEl" :rules="rules" :model="formValue" label-width="120px" class="common-form-panel-div"
      >

      <ex_header_spiler :title="$tt('label_srm_product_insurance_api_service')"></ex_header_spiler>

      <pms-supply-service ref="supplyServiceEl" type="TRANSPORT"></pms-supply-service>


      <ex_header_spiler :title="$tt('label_srm_transport_supplier_line_info')"></ex_header_spiler>
      <el-row style="margin-top: 20px;">
        <el-col>
          <el-form-item :label="$tt('label_srm_transport_line_name')" prop="productName">
            <el-input v-model="formValue.productName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item :label="$tt('label_srm_transport_line_code')" prop="productCode">
            <el-input v-model="formValue.productCode"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item :label="$tt('label_srm_transport_timeliness')">
            <el-input v-model="lineForm.prescription">
              <template slot="append">小时</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="3">
          <el-form-item :label="$tt('label_srm_transport_start_point')">


            <div style="display: flex; gap:4px;  align-items: center; ">
              <ex_super_input v-model="lineForm.originCountryCode" class="form_input_small" type='select' :attrs="{
      url: '/tms-api/base/TmsPlaceInfoRpc/selectCountry.json',
      storeData: true, filterable: true,
      option: { label: it => $formatNameCode(it.countryName, it.countryCode), value: 'countryCode' }
    }" @changeItem="e => {
      lineForm.originCountryCode = (e ? e.countryCode : '');
      lineForm.originCountryType = (e ? e.tmsCountryType : 'SINGLE');
      lineForm.originCountryName = (e ? e.countryName : '');
    }" />

              <place_select v-model="lineForm.originPlaceId" class="form_input_small"
                :countryCode="lineForm.originCountryCode" :tms-country-type="lineForm.originCountryType"
                typeEnum="LINE_AREA" @changeItem="e => lineForm.originPlaceName = e ? e.placeName : ''" />


              <el-button @click="$refs.transportAreaOrigin.show()">{{ $tt('label_logistics_division_config') }}
              </el-button>
              <transport-area-edit ref="transportAreaOrigin" :areaIds="lineForm.originAreaIds"
                :countryCode="lineForm.originCountryCode" :countryName="lineForm.originCountryName"
                @afterSubmitSuccess="list => { lineForm.originAreaIds = list.map(it => it.id) }"></transport-area-edit>

            </div>

          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="3">
          <el-form-item :label="$tt('label_srm_transport_end_point')">
            <div style="display: flex; gap:4px;  align-items: center; ">
              <ex_super_input v-model="lineForm.destCountryCode" class="form_input_small" type='select' :attrs="{
      url: '/tms-api/base/TmsCountryRpc/selectCountry.json',
      storeData: true, filterable: true,
      option: { label: it => $formatNameCode(it.countryName, it.countryCode), value: 'countryCode' }
    }" @changeItem="e => {
      lineForm.destCountryCode = (e ? e.countryCode : '');
      lineForm.destCountryName = e ? e.countryName : ''
      lineForm.destCountryType = (e ? e.tmsCountryType : 'SINGLE');
    }" />
              <place_select v-model="lineForm.destPlaceId" class="form_input_small"
                :countryCode="lineForm.destCountryCode" :tms-country-type="lineForm.destCountryType"
                typeEnum="LINE_AREA" @changeItem="e => lineForm.destPlaceName = e ? e.placeName : ''" />
              <el-button @click="$refs.transportAreaDest.show()">{{ $tt('label_logistics_division_config') }}
              </el-button>
              <transport-area-edit ref="transportAreaDest" :areaIds="lineForm.destAreaIds"
                :countryCode="lineForm.destCountryCode" :countryName="lineForm.destCountryName"
                @afterSubmitSuccess="list => { lineForm.destAreaIds = list.map(it => it.id); updateArea(list) }"></transport-area-edit>


            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item :label="$tt('label_srm_transport_line_type')">
            <el-radio-group v-model="lineForm.transportType">
              <el-radio-button label="SEA_TRANSPORT">{{ $tt('label_srm_transport_sea_transportation')
                }}</el-radio-button>
              <el-radio-button label="LORRY_NAVIGATE">{{ $tt('label_srm_transport_land_transportation')
                }}</el-radio-button>
              <el-radio-button label="SKY_TRANSPORT">{{ $tt('label_srm_transport_air_transportation')
                }}</el-radio-button>
              <el-radio-button label="IRON_TRANSPORT">{{ $tt('label_srm_transport_railway_transportation')
                }}</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="3">
          <el-form-item :label="$tt('label_srm_transport_traffic_limitation')">

            <div style="display: flex; " class="product-line-limit-div">
              <!--              <div class="product-line-limit-col" style="width: 200px;">干线运输方式</div>-->
              <div class="product-line-limit-col">{{ $tt('label_srm_transport_weight_restrictions') }}</div>
              <div class="product-line-limit-col">{{ $tt('label_srm_transport_volume_limit') }}</div>
              <div class="product-line-limit-col">{{ $tt('label_srm_transport_longest_edge_restriction') }}</div>
              <div class="product-line-limit-col">{{ $tt('label_pms_max_edge_length') }} cm</div>
            </div>

            <div style="display: flex; line-height: 48px;" class="product-line-limit-div">

              <div class="product-line-limit-col" style=" display: flex;">
                <el-input placeholder="0kg" v-model="lineForm.transportRule.minWeight"></el-input>
                <div style="padding: 0px 4px;">{{ $tt('label_srm_transport_to') }}</div>
                <el-input placeholder="99999kg" v-model="lineForm.transportRule.maxWeight"></el-input>
              </div>

              <div class="product-line-limit-col" style=" display: flex;">
                <el-input placeholder="0 cbm" v-model="lineForm.transportRule.minVolume"></el-input>
                <div style="padding: 0px 4px;">{{ $tt('label_srm_transport_to') }}</div>
                <el-input placeholder="99999 cbm" v-model="lineForm.transportRule.maxVolume"></el-input>
              </div>

              <div class="product-line-limit-col">
                <el-input v-model="lineForm.transportRule.maxBorder"></el-input>
              </div>

              <div class="product-line-limit-col">
                <el-input v-model="lineForm.transportRule.maxEdgeLength"></el-input>
              </div>

            </div>

          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item :label="$tt('label_srm_transport_supported_packaging')">
            <el-checkbox label="one" v-model="oneTicketOneSku" disabled>{{ $tt('label_srm_transport_one_one')
              }}</el-checkbox>
            <el-checkbox label="many" v-model="lineForm.enableOneVoteMorePiece" true-label="Y" false-label="N">{{
      $tt('label_srm_transport_one_more') }}
            </el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>


      <ex_header_spiler title="服务商报价维护"></ex_header_spiler>
      <div style="height: 10px;"></div>

      <!-- <el-button
        @click="$refs['transportPriceEl'].updateArea([{ id: 111, name: '分区一' }, { id: 222, name: '分区二' }, { id: 333, name: '分区三' }])">测试更新物流分区</el-button> -->

      <transport-price-cfg ref="transportPriceEl" :versionStartTimeDisabled="true" :inputValue="transportForm"
        :showCostPoint="false">
      </transport-price-cfg>

    </el-form>
  </div>

		<div class="page_rela_bottom_area">
      <el-button type="primary" @click="submitForm()">{{ $tt('label_submit') }}</el-button>
      <el-button @click="goback()">{{ $tt('label_back') }}</el-button>
    </div>

  </div>
</template>
<script>


import TransportPriceCfg from '@/component/pms/transport_price_cfg.vue'

import TransportAreaEdit from '@/component/pms/transport-area-edit.vue'

import PmsSupplyService from '@/component/pms/pms-supply-service.vue'

import place_select from '@/component/tms/place_select'
let moduleName = "服务商物流线路"

import router_params from '@/mixin/router_params';

export default {

  components: { place_select, TransportPriceCfg, TransportAreaEdit, PmsSupplyService },
  mixins: [router_params],
  data() {

    let lastTime = new Date().getTime()

    return {
      edit: false,
      "operateTitle": (location.search.length > 0 ? "修改" : "新增") + moduleName,

      "oneTicketOneSku": true,

      "lineForm": {
        "transportType": "SEA_TRANSPORT",
        "lineId": "",
        "routeId": "",
        "lineName": "",
        "originCountryCode": "",
        "originCountryName": "",
        "originCountryType": "SINGLE",
        "originPlaceId": "",
        "originPlaceName": "",
        originAreaIds: [],
        "destCountryCode": "",
        "destCountryName": "",
        "destCountryType": "SINGLE",
        "destPlaceId": "",
        "destPlaceName": "",
        destAreaIds: [],
        "enableOneVoteMorePiece": "N",
        "transportRule": {
          "minWeight": "",
          "maxWeight": "",
          "minVolume": "",
          "maxVolume": "",
          "maxBorder": "",
          "maxEdgeLength": "",
          "expression": ""
        }
      },

      transportForm: {
        "id": 'id_' + (Math.random() + '').replace('.', ''),
        "daterange": [lastTime, parseInt(lastTime) + 31536000000],
        "versionId": "-1",
        "versionName": "",
        "versionStartTime": lastTime,
        "versionEndTime": parseInt(lastTime) + 31536000000,
        "priceVersionTime": "1688471661285",
        "versionType": "CUSTOMER",
        "transportMainPrice":
        {
          "chargeType": "WEIGHT",
          "priceType": "MULTI_ADD",
          "calWeightRate": 6000,
          "priceConfigs": [],
          "pricePoint": "",
          "currencyType": ""
        },
        "additionPrices": [],
        "customers": [],
        "productId": "",
        "versionTag": "",
        "status": "ENABLE"
      },

      "formValue": {
        productType: 'TRANSPORT',
        supplyId: '',
        apiServiceTypeCode: '',
        apiServiceId: '',
        productCode: '',
        productName: ''
      },
      rules: {
        productName: { required: true, message: this.$t('tip_can_no_empty'), trigger: 'blur' },
      }

    };
  },

  mounted() {

    // let _this = this

    // let editId = this.$route.query.id;

    // if (editId) {
    //   _this.$ajax({
    //     url: '/fms-api/product/PmsSupplyProductRpc/detailProduct.json?id=' + editId,
    //     success: (res) => {
    //       if (res && res.data) {


    //       }
    //     }
    //   });
    // }
    // else {
    //   this.$refs['transportPriceEl'].updateForm()
    // }

  },

  methods: {
    init_data_default(into_params) {

      let _this = this

      this.edit = !!into_params.edit
      if (this.edit) {
        if (into_params.id) {
          this.loading = true
          this.$ajax({
            url: "/fms-api/product/PmsSupplyProductRpc/detailProduct.json",
            method: 'post',
            data: { id: into_params.id },
            success: (res) => {

              if (res && res.data) {
                this.loading = false
                this.formValue = res.data

                if (!this.formValue.productGlobalConfig) {
                  this.formValue.productGlobalConfig = {
                    weightUnit: "kg"
                  }
                }

                this.lineForm = this.formValue.transportLineForm


                _this.transportForm = {
                  ..._this.transportForm, ...{
                    "transportMainPrice": this.formValue.transportMainPrice,
                    "additionPrices": this.formValue.additionPrices,
                    "productGlobalConfig": this.formValue.productGlobalConfig
                  }
                }

                _this.$refs['transportPriceEl'].updateForm(_this.transportForm)

                this.$refs['supplyServiceEl'].updateForm({
                  'supplyId': this.formValue.supplyId,
                  'apiServiceTypeCode': this.formValue.apiServiceTypeCode,
                  'apiServiceId': this.formValue.apiServiceId
                })

                this.$emit("tagModifyLabel", { _key: "编辑服务商物流线路 [{code}]", code: res.data.productName })
              }

            }

          })

        }
        this.$emit("tagModifyLabel", "编辑服务商物流线路")
      } else {
        this.$emit("tagModifyLabel", "新增服务商物流线路")
        // this.$refs['transportPriceEl'].updateForm()
      }
    },
    updateArea(list) {
      this.$refs['transportPriceEl'].updateArea(list.map(it => {
        return {
          id: it.id,
          areaCode: it.groupCode,
          name: it.subareaName,
          countryCode: it.countryCode
        }
      }))
    },
    handleClick() {

    },

    submitForm() {

      let _this = this

      let submitData = { ...this.formValue, ..._this.$refs['supplyServiceEl'].getFormData() }

      submitData.transportLineForm = _this.lineForm

      let transportPriceForm = _this.$refs['transportPriceEl'].getFormData()

      submitData.transportMainPrice = transportPriceForm.transportMainPrice

      submitData.productGlobalConfig = transportPriceForm.productGlobalConfig

      submitData.additionPrices = transportPriceForm.additionPrices

      this.$refs['formEl'].validate((valid) => {
        if (valid) {
          _this.$ajax({
            url: '/fms-api/product/PmsSupplyProductRpc/saveUpdateProduct.json',
            type: 'json',
            data: submitData,
            success: (responseData) => {

              this.$message({
                showClose: true,
                message: '提交成功',
                type: 'success'
              })
              this.return_emit(null, "reload")
              this.$tag.tagClose(null, this.intoPath)

            },
            afterAjax() {

            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });



    },

    goback() {
      this.$tag.tagClose(null, this.intoPath)
    }
  }
}
  ;

</script>
<style>
.product-line-limit-div,
.product-line-limit-div-2 {
  display: flex;
}

.product-line-limit-div .product-line-limit-col {
  width: 220px;
  text-align: center;
  margin-right: 10px;
}
</style>
